<template>
  <div :class="$style.view">
    <div class="loginBox" :class="$style.login_form">
      <div :class="$style.loginImg">
        <img src="../assets/logo.png" alt="" />
      </div>
      <el-form
        ref="loginFormRef"
        label-position="left"
        label-width="80px"
        :class="$style.formBox"
        :model="loginForm"
        :rules="loginRule"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user-solid"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            show-password
            prefix-icon="el-icon-warning"
          >
          </el-input>
        </el-form-item>

        <el-row :gutter="40">
          <el-col :span="4" :offset="6"
            ><el-button type="primary" @click="submitLogin"
              >登录</el-button
            ></el-col
          >
          <el-col :span="4" :offset="2"
            ><el-button type="info" @click="resetLogin">重置</el-button></el-col
          >
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
      loginRule: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 11,
            message: "请输入3到11个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 13,
            message: "请输入6到13个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    
  },
  methods: {
    resetLogin() {
      this.$refs.loginFormRef.resetFields();
    },
    submitLogin() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) {
          return this.$message.error("请输入用户名和密码");
        }

        const { data: res } = await this.$axios.post("/login", this.loginForm);
        console.log(res);
        if (res.meta.status !== 200) {
          return console.log("登录请求报错");
        }
        this.$message.success({
          message: "登录成功,准备跳转",
          duration: 1000,
        });
        window.sessionStorage.setItem("token", res.data.token);
        setTimeout(() => {
          this.$router.push("/home");
        }, 600);
      });
    },
  },
};
</script>

<style module>
.view {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #e7eaed;
  /* background-color: #4e6ef2; */
}

.login_form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 15px;
  padding: 10px 14px;
  background-color: #fff;
}

.formBox {
  position: absolute;
  width: 400px;
  box-sizing: border-box;
  bottom: 20px;
}

.loginImg {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* border: 1px solid #ccc; */
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.loginImg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  user-select: none;
  -webkit-user-drag:none;
}
</style>
